import React from 'react'
import '../../assets/css/profile/mycart.less'
import connect from "react-redux/es/connect/connect";
import {Modal, Toast} from "antd-mobile";

class MyCartComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            uid: props.state.userInfo.uid || 119392665
        }
    }

    getData() {
        fetch('http://vueshop.glbuys.com/api/user/fav/index?uid=' + this.state.uid + '&token=1ec949a15fb709370f').then((res) => res.json())
            .then((res) => {
                console.log(res);
                if (res.code === 200) {
                    this.setState({
                        data: res.data
                    })
                }else{
                    this.setState({
                        data: []
                    })
                }
            })
    }

    componentDidMount() {
        this.getData()
    }

    goBack() {
        this.props.history.goBack()
    }

    setPath(path, index) {
        this.props.history.push({
            pathname: path,
            query: {
                id: index
            }
        })
    }


    del(fid) {

        Modal.alert('提示', '您确定要删除吗？', [
            {
                text: '取消',
                onPress: () =>{}
            },
            { text: '确定', onPress:() =>{
                    fetch('http://vueshop.glbuys.com/api/user/fav/del?uid='+ this.state.uid+'&fid='+fid+'&token=1ec949a15fb709370f', {
                        method: 'get',
                        // body: parmas
                    }).then((res) => res.json())
                        .then((res) => {
                            console.log(res);
                            if (res.code === 200) {
                                Toast.success('删除成功', 1);
                                this.getData()
                            }
                        })
                } },
        ])
    }

    render() {
        return (
            <div id='mycart'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>我的收藏</div>
                    <div></div>
                </div>
                <div className='goods'>
                    {this.state.data.map((item, index) => {
                        return (
                            <div key={index}>
                                <div onClick={this.setPath.bind(this, '/detail', item.gid)}><img src={item.image}
                                                                                                 alt=""/></div>
                                <div onClick={this.setPath.bind(this, '/detail', item.gid)}>{item.title}</div>
                                <div>￥{item.price}</div>
                                <div>
                                    <div>购买</div>
                                    <div onClick={this.del.bind(this, item.fid)}>删除</div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

export default connect((state) => {
    return {
        state
    }
})(MyCartComponent)